<template>
    <div class="search-box">
      <!--<el-input suffix-icon="el-icon-search" :placeholder="searchText" class="search-input-search" size="small" v-if="!showImg"></el-input>-->
      <el-input v-if="!showImg" slot="reference"  @keyup.enter.native="search" placeholder="搜索用户或者宠博..." v-model="searchText" class="input-search" size="small"><i slot="suffix" class="el-icon-search" @click="search"></i></el-input>


      <!--搜索用户部分-->
      <div v-loading="userLoading">
        <ul class="search-user-main-box" v-if="userCount!==0">
          <li class="search-user-main-box-top">
            <span class="search-user-main-box-title">相关用户</span>
            <span @click="showAllUser"  class="search-show-more-text">查看更多<i class="el-icon-arrow-right"></i></span>
          </li>
          <li class="search-user-box" v-for="(item,index) in userInfo" :key="index">
            <img @click="$router.push('/homePage?id=' + item.id)" :src="item.header_image" alt="" class="search-user-img">
            <span @click="$router.push('/homePage?id=' + item.id)" class="search-user-name">{{item.nickname}}
              <span class="iconfont icon-nan" v-if="item.sex==='男'"></span>
              <span class="iconfont icon-nv" v-if="item.sex==='女'"></span>
            </span>
            <span class="search-user-detail">共写了{{item.article_num}}篇文章，获得{{item.liked_num}}个赞</span>
            <span v-if="item.followed" @click="cancel(item)" class="search-followed-button"><i class="el-icon-check"></i>已关注</span>
            <span v-else @click="follow(item)" class="search-follow-button"><i class="iconfont icon-jiahao"></i>关注</span>
          </li>
        </ul>
      </div>



      <!--搜索文章部分-->
      <div v-loading="articleLoading">
        <ul class="search-article-main-box">
          <li class="search-article-box" v-for="(item,index) in articleInfo" :key="index">
            <span @click="$router.push('/article?id=' + item.id)" class="search-article-title">{{item.title}}</span>
            <span class="search-article-content">{{item.desc}}</span>
            <div class="search-img-box">
              <img :src="item.cover_image" v-preview="item.cover_image" class="search-article-img" alt="" v-if="showImg">
            </div>
            <span class="search-article-view-count"><i class="iconfont icon-yanjing"></i>{{item.click_number}}</span>
            <span class="search-article-comment"><i class="iconfont icon-pinglun"></i>{{item.comment_number}}</span>
            <span class="search-article-like"><i class="iconfont icon-favour-full" style="font-size: 13px;margin-left: 7px"></i>{{item.like_number}}</span>
            <span class="search-article-post-time">{{item.add_time}}</span>
            <div class="search-article-divider"></div>
          </li>
        </ul>
        <!--底部分页-->
        <div class="search-bottom-pagination">
          <el-pagination
            class="search-pages"
            background
            layout="prev, pager, next"
            :total="articleCount"
            v-if="articleCount"
            @current-change="changePage"
            :page-size="5">
          </el-pagination>
        </div>
      </div>


      <!--如果相关用户和头像都没有-->
      <NoData v-if="userCount===0 &&articleCount===0" :tip="tip"/>
    </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {getSearchUser} from "../../api/user";
  import {getSearchArticle} from "../../api/article";
  import NoData from '../../components/noData'
  import {userFollow,getUserFollow,unFollow} from "../../api/operation";

  export default {
      name: "index",
      data(){
        return{
          searchText:'',  //搜索框中的文本
          userInfo:{},
          articleInfo:{},
          userLoading:false,      //用户部分加载等待
          articleLoading:false,   //文章部分加载等待
          followInfo:{},   //用户的关注用户列表
          loading:false,
          userCount:0,        //相关用户滆湖
          articleCount:0,     //相关文章个数
          userPage:1,     //相关文章的当前页码
          articlePage:1,     //相关文章的当前页码
          tip:'未找到相关的用户以及文章',    //没有数据的提示语
        }
      },
      created(){
        this.searchText=this.$route.query.content;
        this.userLoading=true;
        this.articleLoading=true;
        this.getArticleList(this.$route.query.content);
        this.getUserList(this.$route.query.content);
      },
      components:{
        NoData
      },
      computed:{
        ...mapState('base', {
          showImg: state => state.showImg
        }),
        ...mapState('user', {
          token: state => state.token,
        }),
      },
      watch: {
        '$route' (to, from) { //监听路由是否变化
          let vm=this;
          if(this.$route.query.content){//判断id是否有值
            //调数据
            // this.searchText=vm.$router.query.content;
            vm.getArticleList(vm.$route.query.content);
            vm.getUserList(vm.$route.query.content);
          }
        }
      },
      methods:{
        search(){
          this.$router.push('/search?content=' + this.searchText);
        },
        getUserList(value){
          let vm=this;
          getSearchUser(value + '&page=' + vm.userPage).then(res=>{
            vm.userInfo=res.data.results;
            vm.userCount=res.data.count;
            if(vm.token && vm.userCount!==0){
              getUserFollow('').then(res=>{
                vm.followInfo=res.data.results;
                for(let i in vm.userInfo){
                  for(let j in vm.followInfo){
                    if(vm.userInfo[i].id === vm.followInfo[j].followed_user.id){
                      vm.userInfo[i].followed=true;
                      console.log('111');
                      break;
                    }
                  }
                }
                vm.userLoading=false;
              }).catch(error=>{
                vm.userLoading=false;
              })
            }else{
              vm.userLoading=false;
            }
          }).catch(error=>{
            console.log(error.data);
            vm.userLoading=false;
          })
        },
        getArticleList(value){
          let vm=this;
          getSearchArticle(value + '&page=' + vm.articlePage).then(res=>{
            console.log(res.data);
            vm.articleInfo=res.data.results;
            vm.articleCount=res.data.count;
            vm.articleLoading=false;
          }).catch(error=>{
            console.log(error.data);
            vm.articleLoading=false;
          })
        },
        follow(item){
          let vm=this;
          userFollow({"followed_user":item.id}).then(res=>{
            vm.$message.success('关注成功');
            item.followed=true;
          }).catch(error=>{
            vm.$message.error("关注失败");
          })
        },
        cancel(item){
          let vm=this;
          if(vm.token){
            unFollow(item.id).then(res=>{
              vm.$message.success('取消关注成功');
              item.followed=false;
            }).catch(error=>{
              vm.$message.error('取消关注失败');
            });
          }else{
            vm.$message.error('请先登录在进行以下操作');
          }
        },
        changePage(now){
          this.articleLoading=true;
          this.articlePage=now;
          this.getArticleList(this.$route.query.content);
        },
        showAllUser(){
          if(this.userCount<=5){
            this.$message.error('没有更多啦...');
          }else{
            this.userPage+=1;
            this.getUserList(this.$route.query.content);
          }
        }
      }
    }
</script>

<style lang="stylus" scoped>
@import "../../stylus/color.styl"

  .search-box{
    max-width 600px!important
    margin 0 auto
    width 100%
  }
  .search-input-search{
    margin-bottom 20px
  }


    //搜索用户列表
  .search-user-main-box{
    list-style none
    padding 20px 10px
    margin 0 0 30px 0
    border 1px solid $color-divider
  }
  .search-user-main-box-top{
    position relative
    height 15px
    line-height 15px
    margin-bottom 20px
  }
  .search-user-main-box-title{
    font-size 14px
    color $color-title
    margin-bottom 10px
  }
  .search-user-box{
    position relative
    padding-bottom 8px
    border-bottom 1px solid $color-divider
    margin-bottom 10px
  }
  .search-user-img{
    width 40px
    height 40px
    border-radius 20px
    border 1px solid $color-border
    cursor pointer
  }
  .search-user-name{
    position absolute
    left 55px
    top 5px
    font-size 13px
    cursor pointer
    color $color-content
  }
  .search-user-detail{
    font-size 11px
    color $color-gray
    left 55px
    bottom 13px
    position absolute
  }
  .search-follow-button{
    background-color $color-success
    font-size 11px
    padding 2px 6px
    border-radius 8px
    position absolute
    cursor pointer
    right 0
    top 12px
    color $color-background
  }
  .search-followed-button{
    background-color $color-gray
    font-size 11px
    padding 2px 6px
    border-radius 8px
    cursor pointer
    position absolute
    right 0
    top 12px
    color $color-background
  }
  .search-show-more-text{
    font-size 14px
    position absolute
    right -5px
    color $color-blue
    cursor pointer
  }


    //搜索文章列表
  .search-article-main-box{
    list-style none
    padding 0
    margin 0
  }
  .search-article-box{
    position relative
    max-width 600px
    margin 0 auto
  }
  .search-img-box{
    width 150px
    height 100px
    right 0
    top 50%
    border-radius 6px
    display inline-block
    position absolute
    margin-top -51px
    overflow hidden
  }
  .search-article-img{
    width 150px
    height 100px
    position absolute
    border-radius 6px
    border 1px solid $color-border
    right 0
    top 50%
    margin-top -51px
    cursor zoom-in
    transition all 0.9s
  }
  .search-article-img:hover{
    transform scale(1.3)
  }
  .search-article-title{
    font-size 16px
    color $color-title
    font-weight 700
    display block
    margin-bottom 7px
    cursor pointer
    padding-top 16px
  }
  .search-article-title:hover{
    text-decoration  underline
  }
  .search-article-content{
    font-size 13px
    color $color-gray
    max-width 430px
    display block
    margin-bottom 7px
    line-height 25px
    min-height 50px
  }
  .search-article-view-count{
    font-size 12px
    color $color-gray
    display inline-block
    padding-bottom 16px
    margin-right 7px
    cursor pointer
  }
  .search-article-comment{
    font-size 12px
    color $color-gray
    display inline-block
  }
  .search-article-like{
    font-size 12px
    color $color-gray
  }
  .search-article-divider{
    width: 100%;
    height: 1px;
    background-color: $color-divider;
    max-width 600px
    margin 0 auto
  }
  .search-article-post-time{
    color $color-gray
    font-size 12px
    margin-left 7px
  }


  //字体图标
  .icon-favour-full{
    margin-right 5px
    margin-left 10px
    font-size 18px
  }
  .icon-pinglun{
    font-size 12px
    margin-right 5px
  }
  .icon-yanjing{
    font-size 12px
    margin-right 5px
  }
  .icon-jiahao{
    font-size 10px
    margin-right 2px
  }
  .el-icon-check{
    font-size 10px
    margin-right 2px
  }
  .el-icon-search{
     font-size 18px
     color $color-gray
     margin 6px 6px 0 0
   }
  .search-bottom-pagination{
    margin 20px 0 40px 0
    text-align right
  }
  .search-pages{
    margin-top 20px
    margin-bottom 30px
  }
  .icon-nan{
    color $color-blue
    font-size 13px
  }
  .icon-nv{
    color $color-pink
    font-size 13px
  }
</style>
